<template>
    <el-container class="container" :style="{height: height,width: width}">
        <el-header class="header">{{options.title}}</el-header>
        <el-main class="main">
            <div class="today">{{data.today || 0}}</div>
            <div class="yesterday" v-if="showYesterday">
                <span>昨天 {{data.yesterday || 0}}</span>
                <div class="percent-wrap" v-if="data.percent">
                    <i class="iconfont icon-xiajiantou" :class="data.percent < 0 ? 'down' : 'up'"></i>
                    <span>{{data.percent < 0 ? -data.percent : data.percent}}%</span>
                </div>
                <div v-else style="font-size: 26px;">-</div>
            </div>
            <div class="total">{{options.totalText}}：{{data.total || 0}}</div>
        </el-main>
        <div class="tag">日</div>
    </el-container>
</template>

<script setup>
    import {ref,defineProps} from 'vue';
    const props = defineProps({
      'width': {
        default: '100%'
      },
      'height': {
        default: '100%'
      },
      'showYesterday': {
        default: false
      },
      'options': {
        default:{
          title: '',
          totalText: ''
        }
      },
      'data': {
        default: {
          today: 0,
          yesterday: 0,
          percent: 0,
          total: 0
        }
      }
    })
</script>

<style scoped lang="less">
    .container{
        position: relative;
        .header{
            border-bottom: 1px solid #e6e6e6;
            padding: 0 16px;
            height: 40px;
            line-height: 40px;
            color: #5b5b5b;
        }
        .main{
            color: #5b5b5b;
            padding: 0 16px;
            .today{
                padding-top: 20px;
                font-size: 30px;
                line-height: 50px;
            }
            .yesterday{
                font-size: 12px;
                line-height: 30px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-bottom: 1px solid #e6e6e6;
                .percent-wrap{
                    font-size: 12px;
                    .icon-xiajiantou{
                        font-size: 10px;
                        &.up{
                            display: inline-block;
                            color: #00a812;
                            transform: scale(0.8,1) rotate(180deg);
                        }
                        &.down{
                            color: #ff4d4a;
                            transform: scale(0.8,1);
                        }
                    }
                }
            }
            .total{
                font-size: 12px;
                line-height: 40px;
            }
        }
        .tag{
            position: absolute;
            top: 0;
            right: 10px;
            padding: 2px 3px;
            background: #0a97ff;
            color: #ffffff;
            font-size: 12px;
            border-radius: 0 0 2px 2px;
        }
    }
</style>
